<?php $culture = $sf_user->getCulture()?>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBp4Lmo-IZ8NzYECB3F-rwYAAzx9YVo_HA&sensor=false"></script>
<script type="text/javascript">
	function initialize() {
		/* Loading earthquake json data */
		$.post( "<?php echo url_for( "earthQuake/earthQuakeMapData" )?>", function( data ) {
			var eks = $.parseJSON(data);

			var last = eks[0];
			
			var mapOptions = {
				center: new google.maps.LatLng( last.lat, last.lng ),
				zoom: 4,
				mapTypeId: google.maps.MapTypeId.ROADMAP
			};
			
			var map = new google.maps.Map( document.getElementById("earthquake-map"), mapOptions );
			
		    for( var i = eks.length - 1; i >= 0; i-- ) {

		        var ek = eks[i];
		        
		        var image = '<?php echo image_path("/images/ico-star.png")?>';
		        if( i > 0 ) {
		            image = '<?php echo image_path("/images/ico-star-yellow.png")?>';
		        }

			    var latlong = new google.maps.LatLng( ek.lat, ek.lng );
			    var beachMarker = new google.maps.Marker({
					position: latlong,
					map: map,
					icon: image
				});
		    }
		});		
	}

	// Initialize the plugin with no custom options
	function initCalendar() {
			
		var dates = $("#dateStart, #dateEnd").datepicker({
			dateFormat: 'd/m/yy',
			changeMonth: true,
			changeYear: true,
			//minDate: 0,
			maxDate: 0,
			numberOfMonths: 1,
			onSelect: function( selectedDate ) {
				var option = this.id == "dateStart" ? "maxDate" : "minDate",
					instance = $( this ).data( "datepicker" ),
					date = $.datepicker.parseDate(
						instance.settings.dateFormat ||
						$.datepicker._defaults.dateFormat,
						selectedDate, instance.settings );
				dates.not( this ).datepicker( "option", option, date );
			}
		});
		
		$('.load').live("click", function () {
			var ID = $(this).attr("id");
			var val = 1;
			if (ID) {
				$("#more" + ID).html('<img src="<?php echo image_path("/images/moreajax.gif")?>" />');
				$.ajax({
					type: "POST",
					url: "<?php echo url_for( "earthQuake/earthquakeContent" )?>",
					data: "lastmsg=" + ID + "",
					cache: false,
					success: function (data) {
						$("#t-content tbody").append(data);
						$("#more" + ID).remove();
					}
				});
			}
			else {
				$(".morebox").html('The End');
			}
			return false;
		});
				
	}

	function searchEarthQuake() {
		var start = $("#dateStart").val();
		var end = $("#dateEnd").val();

		if( start == '' || end == '' ) {
			alert("<?php echo __('Please input Startdate and Enddate for search!')?>");
		}
		else {
			/*
			$.post( "<?php echo url_for('/earthQuake/earthquakeContent')?>", { start: start, end: end }, function( data ) {
				
			});*/

			$('#frm').submit();
		}
	}
	
	callLastFuncs[callLastFuncs.length] = "initialize()";
	callLastFuncs[callLastFuncs.length] = "initCalendar()";
</script>
<div class="header-txt"><?php echo __("Earthquake Report")#รายงานแผ่นดินไหว?></div>
<div id="earthquake-map"></div>
<div class="h-txt-black-b"><?php echo TMDService::renderI18n( $earthQuake, "getStitle", $culture )?></div>
<ul class="earthquake-detail">
	<li><div class="h-inner-tab-b"><?php echo __("Richter Magnitude") #ขนาด?></div><div class="blue-tab-txt">: <?php echo $earthQuake->getNmagnitude()?></div></li>
	<li><div class="h-inner-tab-b"><?php echo __("Region") #จุดศูนย์กลางแผ่นดินไหว?></div><div class="blue-tab-txt">: <?php echo TMDService::renderI18n( $earthQuake, "getSorigin", $culture )?></div></li>
	<li><div class="h-inner-tab-b"><?php echo __("Date") #วันที่?></div><div class="blue-tab-txt">: <?php echo TMDService::toThaiFullDatetime( $earthQuake->getDttime() )?> <?php echo __("UTC") #น.?></div></li>
	<li><div class="h-inner-tab-b"><?php echo __("Latitude") #ละติจูด?></div><div class="blue-tab-txt">: <?php echo $earthQuake->getIlatitudeDegree()?> <?php echo $earthQuake->getIlatitudeMinute()?>' <?php echo $earthQuake->getIlatitudeSecond()?>'' <?php echo __("S")#เหนือ?></div></li>
	<li><div class="h-inner-tab-b"><?php echo __("Longitude") #ลองจิจูด?> </div><div class="blue-tab-txt">: <?php echo $earthQuake->getIlongitudeDegree()?> <?php echo $earthQuake->getIlongitudeMinute()?>' <?php echo $earthQuake->getIlongitudeSecond()?>'' <?php echo __("E")#ตะวันออก?></div></li>
	<li><div class="h-inner-tab-b"><?php echo __("Depth") #ความลึกจากระดับผิวดิน?></div><div class="blue-tab-txt">: <?php echo $earthQuake->getIdeepUnderground()?> <?php echo __("km.") #กิโลเมตร?></div></li>
</ul>
<div class="bar-blue">
	<div class="h-txt-white-earth"><?php echo __("Last 15 day")#รายงานแผ่นดินไหวในรอบ 15 วัน?></div>
	<form method="post" action="<?php echo url_for( "earthQuake/index" )?>" name="frm" id="frm">
		<div class="bar-blue-txt-w"><?php echo __("Select Date")#เลือกวันที่?></div>
		<div class="txt-box">
			<input type="text" class="txtbox" name="dateStart" id="dateStart" value="<?php ?>" />
		</div>
		<div class="bar-blue-txt-w"><?php echo __("To")#ถึง?></div>
		<div class="txt-box">
			<input type="text" class="txtbox" name="dateEnd" id="dateEnd" value="" />
		</div>
		<div class="search-bar-blue-earthquake">
			<input type="button" onclick="searchEarthQuake()" id="searchEarthQuakeButton" class="sendq" value="<?php echo __("Search")#ค้นหา?>">
		</div>
	</form>
</div>
<div class="main-box">
	<div class="border-table">
		<table width="100%" cellpadding="0" cellspacing="0">
		<thead>
		    <tr>
		        <th style="width:100px;"><?php echo __("Date")#วันที่?></th>
		        <th><?php echo __("Time")?></th>
		        <th style="width:160px;"><?php echo __("Center")?></th>
		        <th style="width:100px;"><?php echo __("Latitude") #ละติจูด?></th>
		        <th style="width:100px;"><?php echo __("Longitude") #ลองจิจูด?></th>
		        <th><?php echo __("Magnitude")#ขนาด?></th>
		        <th><?php echo __("Depth")#ลึกจาก<br/>พื้นดิน?></th>
		    </tr>
		</thead>
		<tbody>
		<?php if( isset( $earthQuakes ) && count( $earthQuakes ) > 0 ):?>
			<?php foreach( $earthQuakes as $eq ):?>
			    <tr>
			        <td><?php echo TMDService::toThaiDate( $eq->getDttime() )?></td>
			        <td><?php echo TMDService::toThaiTime( $eq->getDttime() )?></td>
			        <td style="text-align:left;"><?php echo TMDService::renderI18n( $eq, "getSorigin", $culture )?></td>
			        <td><?php echo $eq->getIlatitudeDegree()?> <?php echo $eq->getIlatitudeMinute()?>' <?php echo $eq->getIlatitudeSecond()?>'' N</td>
			        <td><?php echo $eq->getIlongitudeDegree()?> <?php echo $eq->getIlongitudeMinute()?>' <?php echo $eq->getIlongitudeSecond()?>'' E</td>
			        <td><?php echo $eq->getNmagnitude()?></td>
			        <td><?php echo $eq->getIdeepUnderground()?></td>
			    </tr>
			<?php endforeach;?>
		<?php endif;?>
		</table>
	</div>
	<div class="load-more" id="more1"><input type="button" class="load" id="1" value="<?php echo __("More")#ดูเพิ่มเติม?>" /></div>
</div>
<script type="text/javascript" src="<?php echo _compute_public_path("/js/jquery-ui-1.10.3.custom.min.js", "js", false)?>"></script>
<link rel="stylesheet" type="text/css" href="<?php echo _compute_public_path("/css/overcast/jquery-ui-1.10.3.custom.min.css", "css", false)?>" />

